<template>
  <div class="productdetails">
    <home-img v-if="imgArr.length > 0"
              ref="img"
              :extend="{width:750, height:642, showDots:true, speed:5*1000, data:imgArr}"
              class="img-shuff" />
    <div class="desc">
      <div class="title">{{detailData.pdname}}</div>
      <div class="price nomargin "
           v-if="detailData.discount - '1' < 0">原价：<span class="price line-price">{{detailData.skuList
          && detailData.skuList[0].psprice | math-money}}/元</span>{{detailData.skuList
        && detailData.skuList[0].pdunit}}</div>
      <div class="price">折扣价：{{detailData.skuList &&
        detailData.skuList[0].psprice
        | math-mul(detailData.discount)
        | math-round(2,1) | math-money}}/元{{detailData.skuList &&
        detailData.skuList[0].pdunit}}</div>
    </div>
    <div v-for="(item,index) in imgDetatils"
         class="imgs">
      <img :src="item">
    </div>
    <div class="bottom">
      <div class="shopcat">
        <img-pointer class="shopcat-img"
                     size="39"
                     :num="shopcatCount"
                     img="icon-shopcat"></img-pointer>
        <div class="shopcat-text"
             style="margin-top: 0.39rem;"
             @click="goCart()">购物车</div>
      </div>
      <div class="btns">
        <div class="join-shopcat"
             @click="clickBottomBtn(0)">加入购物车</div>
        <div class="immediate-buy"
             @click="clickBottomBtn(1)">立即购买</div>
      </div>
    </div>
    <buy-picker :detailData="detailData"
                v-model="showBuyPicker"
                :type="buyType"></buy-picker>
  </div>
</template>

<script>
import pageList from '@/components/common-js/page-list'
import imgPointer from '@/components/img-pointer'
import buyPicker from '@/components/buy-picker'

import HomeImg from '@/components/home-img'
import mixins from '@/mixins'
export default {
  name: 'productdetails',
  mixins: [pageList, mixins],
  data () {
    return {
      imgArr: [],
      detailData: {},
      imgDetatils: '',
      showBuyPicker: false,
      buyType: 0,
      shopcatCount: 0
    }
  },
  async mounted () {
    await this.requestNet()
    this.getShopCount()
    this.BIND_LOADING(false)
  },
  methods: {
    async getShopCount () {
      let count = await this.$ajax.get('/tCart/cartCount.json')
      if (count) {
        this.shopcatCount = count.result || 0
      }
    },
    async requestNet () {
      this.detailData = await this.$ajax.get('/tProduct/detail.json', {
        pdid: this.$route.query.pdid
      })
      this.imgArr = []
      this.imgArr.splice(this.imgArr.length, 0, this.detailData['img'])
      for (let i = 1; i < 6; i++) {
        if (this.detailData['img' + i] && this.detailData['img' + i].trim().length > 0) {
          this.imgArr.splice(this.imgArr.length, 0, this.detailData['img' + i])
        }
      }
      this.imgDetatils = JSON.parse(this.detailData.pddetail)
    },
    clickBottomBtn (flag) {
      this.buyType = flag
      this.showBuyPicker = true
    },
    goCart () {
      this.$router.push({name: 'shopcat'})
    }
  },
  components: {
    imgPointer,
    HomeImg,
    buyPicker
  }
}
</script>


<style lang="stylus" scoped>
.productdetails {
  padding-bottom: 108px;

  img {
    width: 100%;
    height: 641px;
  }

  .desc {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;

    .title {
      margin-top: 34px;
      font-size: 30px;
      color: rgba(51, 51, 51, 1);
    }

    .price {
      margin-top: 24px;
      font-size: 26px;
      color: rgba(174, 42, 38, 1);
      margin-bottom: 51px;
    }

    .nomargin {
      margin-bottom: 10px;
    }

    .line-price {
      text-decoration: line-through;
    }
  }

  .imgs {
    display: flex;
  }

  .bottom {
    height: 108px;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    z-index: 10;
    display: flex;
    align-items: center;

    .shopcat {
      display: flex;
      margin-left: 68px;
      justify-content: center;

      .shopcat-img {
      }

      .shopcat-text {
        font-size: 22px;
        color: rgba(153, 153, 153, 1);
      }
    }

    .btns {
      display: flex;
      flex: 1;
      justify-content: flex-end;
      margin-right: 14px;

      .join-shopcat {
        width: 183px;
        height: 70px;
        border-radius: 6px;
        border: 1px solid rgba(174, 42, 38, 1);
        font-size: 30px;
        color: rgba(174, 42, 38, 1);
        margin-right: 16px;
        justify-content: center;
        align-items: center;
        display: flex;
      }

      .immediate-buy {
        width: 174px;
        height: 70px;
        background: rgba(174, 42, 38, 1);
        border-radius: 6px;
        font-size: 30px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
